<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="shortcut icon" type="image/x-icon" href="images/zj.ico"/>
    <link rel="stylesheet" href="css/per.css">
    <link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>

    <!-- font-awesome -->
    <link rel='stylesheet prefetch' href='https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css'>

    <!-- bootstrap核心css -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- 可选的bootstrap主题 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>

    <!-- jquery 务必在bootstrap.min.js之前引入 -->
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

    <!-- bootstrap核心javascript -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        $(function () {
            $('.navbar-nav li').click(function (e) {
                $(this).addClass('active').siblings().removeClass('active');
            });
        });
        $('body').scrollspy({target: '#navbar'})
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .wrap {
            height: 300px;
            width: 500px;
            margin: 60px auto;
            overflow: hidden;
            position: relative;
            margin: 100px auto;
        }

        .wrap ul {
            position: absolute;
        }

        .wrap ul li {
            height: 300px;
        }

        .wrap ol {
            position: absolute;
            right: 5px;
            bottom: 10px;
        }

        .wrap ol li {
            height: 20px;
            width: 20px;
            background: #ccc;
            border: solid 1px #666;
            margin-left: 5px;
            color: #000;
            float: left;
            line-height: center;
            text-align: center;
            cursor: pointer;
        }

        .wrap ol .on {
            background: #E97305;
            color: #fff;
        }

    </style>
    <script type="text/javascript">
        window.onload = function () {
            var wrap = document.getElementById('wrap'),
                pic = document.getElementById('pic').getElementsByTagName("li"),
                list = document.getElementById('list').getElementsByTagName('li'),
                index = 0,
                timer = null;

            // 定义并调用自动播放函数
            timer = setInterval(autoPlay, 2000);

            // 鼠标划过整个容器时停止自动播放
            wrap.onmouseover = function () {
                clearInterval(timer);
            }

            // 鼠标离开整个容器时继续播放至下一张
            wrap.onmouseout = function () {
                timer = setInterval(autoPlay, 2000);
            }
            // 遍历所有数字导航实现划过切换至对应的图片
            for (var i = 0; i < list.length; i++) {
                list[i].onmouseover = function () {
                    clearInterval(timer);
                    index = this.innerText - 1;
                    changePic(index);
                };
            }
            ;

            function autoPlay() {
                if (++index >= pic.length) index = 0;
                changePic(index);
            }

            // 定义图片切换函数
            function changePic(curIndex) {
                for (var i = 0; i < pic.length; ++i) {
                    pic[i].style.display = "none";
                    list[i].className = "";
                }
                pic[curIndex].style.display = "block";
                list[curIndex].className = "on";
            }

        };

    </script>
    <title>personal</title>
</head>
<body data-spy="scroll" data-target="#navbar">
<header class="navbar navbar-default navbar-fixed-top" id="banner">
    <div class="container"><a class="scrollable" href="#top"><img src="images/logo.png" alt="personal" title="personal"></a>
        <nav class="collapse navbar-collapse" id="navbar" role="navigation">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a class="scrollable" href="#top">简介</a></li>
                <li><a href="#portfolio">作品集</a></li>
                <li><a href="#contact">为我打call</a></li>
            </ul>
        </nav>
    </div>
</header>
<!-- end header-->
<a id="top" name="home"></a>
<main>
    <header>
        <div class="intro-text">
            <h1>柠夏初开</h1>
            <p>871619917</p>
            <hr class="star-bright"/>
            <span class="skills">山有木兮木有枝，心悦君兮君不知。</span>
        </div>
        <img src="images/lb.png" alt="鲁班" title="正在思考，如何攻克地心引力">
    </header>
    <!-- Gallery Grid Section-->
    <section id="portfolio">
        <h2>作品集</h2>
        <hr class="star-dark"/>
        <div class="wrap" id='wrap'>
            <ul id="pic">
                <li><img src="images/1.jpg" alt=""></li>
                <li><img src="images/2.jpg" alt=""></li>
                <li><img src="images/3.jpg" alt=""></li>
                <li><img src="images/4.jpg" alt=""></li>
                <li><img src="images/5.jpg" alt=""></li>
            </ul>
            <ol id="list">
                <li class="on">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ol>
        </div>
    </section>
    <!-- Contact Section-->
    <section id="contact">
        <h2>为我打call</h2>
        <hr class="star-dark"/>
        <div>
            <form id="contactForm" novalidate="" action="contact.php">
                <div class="form-item">
                    <label for="name">姓名</label>
                    <input id="name" type="text" placeholder="姓名" required="">
                </div>
                <div class="form-item">
                    <label for="email">邮箱</label>
                    <input id="email" type="email" placeholder="邮箱" required="">
                </div>
                <div class="form-item">
                    <label for="phone">电话</label>
                    <input id="phone" type="tel" placeholder="电话" required="">
                </div>
                <div class="form-item">
                    <label for="message">留言</label>
                    <textarea id="message" rows="1" placeholder="留言" required=""></textarea>
                </div>
                <br>
                <button type="submit" class="btn btn-success" style="background-color: #d9978f; border-color: #d9978f;">
                    <span class="glyphicon glyphicon-send" style="padding-right:5px"></span>点击运行
                </button>
            </form>
            <div>
                <p><img src="images/yuema.png"/></p>
                <p>丑拒:)</p>
            </div>
        </div>
    </section>
    <!-- Scroll to Top Button (Only supposed to be visible on small and small screen sizes)-->
    <div class="scroll-top"><a class="button scrollable" href="#top"><i class="fa fa-chevron-up"></i></a></div>
</main>
<!-- Footer-->
<footer>
    <div id="footer-above">
        <div class="footer-share">
            <h3>我是以怎样的心情做这个页面的呢</h3>
            <p style="font-family: YouYuan;">这篇文章是从<a
                    href="http://qlip.in" style="color: #f4df9b;">Justin Sane</a>那里抄来哒！<i class="fa fa-fw fa-music" style="color: #f4df9b;"></i></p>
        </div>
        <div class="footer-follow">
            <h3>粉我啊！</h3>
            <div class="footer-li">
                <ul>
                    <li><a class="button social" href="https://github.com/zj0511"><i
                            class="fa fa-fw fa-github"></i></a></li>
                    <li><a class="button social" href="https://weibo.com/u/1597227147"><i
                            class="fa fa-fw fa-weibo"></i></a></li>
                    <li>
                </ul>
            </div>
        </div>
    </div>
    <div id="footer-below">ZJ ©
        <script>document.write(new Date().getFullYear())</script>
        . All Rights Reversed
    </div>
</footer>
</body>
</html>
